<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<title>Zookeeper管理工具</title>
	<link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.min.css}"/>
	<style>
		body{
		  margin: 0;
		  padding: 0;
		}
		#top-image {
		  background: linear-gradient(
			  rgba(0, 0, 0, 0.2),
			  rgba(0, 0, 0, 0.2)
		  ), url('images/bg.jpg') no-repeat fixed;
		  position:fixed ;
		  background-size:100% 100%;
		  top:0;
		  width:100%;
		  z-index:0;
		  height:100%;
		}
	
		.jumbotron {
		  background-color: transparent !important;
		  color: white !important;
		  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
		}
	
		#content {
		  width: 800px;
		  transform:translateY(-50%);
		  top: 30%;
		  position: relative;
		}
		.linkarea{text-align: center;color:white;padding-top:0px 70px;}
		ul{list-style: none;}
		.addrname{width:100px;display: inline-block;margin:5px;}
	</style>
</head>
<body>

<div id="top-image">
  <div id="content" class="container center-block">
    <div class="jumbotron">
      <div class="container text-center">
        <h1>Zookeeper管理</h1>
        <p>数据可视，编程无忧</p>
        <div class="input-group input-group-lg"> 
			<span class="input-group-addon" id="sizing-addon1">
				<span class="glyphicon  glyphicon-tree-conifer" aria-hidden="true"></span>
			</span>
			<input type="text" class="form-control" placeholder="输入zookeeper地址" id="inputzkaddr" aria-describedby="sizing-addon1"/>
			<span class="input-group-btn">
				<button class="btn btn-default" type="button" id="searchbtn">搜 索</button>
			</span> 
		</div>
      </div>
    </div>
    <div class="linkarea container">    
    	<div class="row" th:each="env : ${envs}">
    		<div class="col-md-2 text-right" th:text="|${env.name}：|"></div>
    		<div class="col-md-4 text-left"><a th:href="|javascript:jump2treePage('${env.addr}')|" th:text="${env.addr}"></a></div>
    	</div>
    </div>
  </div>
</div>
<form method="post" action="zookeeper/tree" target="_blank" id="jmpform">
	<input type="hidden" id="zkaddr" name="zkaddr" value=""/>
</form>

<script src="js/jquery.min.js"></script>
<script type="text/javascript">
	<!-- 跳转 -->
	function jump2treePage(addr){
		$("#zkaddr").val(addr);
		$("#jmpform").submit();
	}
	<!-- 绑定元素事件 -->
	<!-- 搜索按钮 -->
	$("#searchbtn").click(function(){
		var zkaddr = $("#inputzkaddr").val();
		if(zkaddr==""){
			alert("非法的查看地址，请检查！");
			return false;
		}
		jump2treePage(zkaddr);
	});
</script>

</body>
</html>